<template>
	<!-- 时间 -->
	<div class="containerv">
		<el-date-picker v-model="time" type="daterange" align="right" unlink-panels range-separator="至"
			start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions" @change="changeTime" size="small"
			value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
	</div>
</template>
<script>
export default {
  name: 'SearchTime',
  props: {
    clearTime: {
      // 重置时
      type: Boolean,
      required: false,
    },
    initTime: {
      // 初始化时给定默认时间
      type: Array,
      required: false,
    },
    disableTime: {
      type: String,
      default: '',
    },
  },
  watch: {
    clearTime(value) {
      if (value === true) {
        this.time = ''
      }
    },
    initTime(val) {
      this.time = val
      const start
				= `${val[0].getFullYear()
				 }-${
				 val[0].getMonth() + 1
				 }-${
				 val[0].getDate()}`
      const end
				= `${val[1].getFullYear()
				 }-${
				 val[1].getMonth() + 1
				 }-${
				 val[1].getDate()}`
      this.$emit('getTimes', [start, end])
    },
  },
  data() {
    return {
      time: '',
      // 快捷选项选择日期
      pickerOptions: {

        /*
         * disabledDate: time => {
         * 	return this.dealDisabledDate(time)
         * },
         */
        shortcuts: [
          {
            text: '今天',
            onClick(picker) {
              const end = new Date()

              /*
               * const start = new Date()
               * start.setTime(start.getTime() - 3600 * 1000 * 24 * 1)
               */
              picker.$emit('pick', [end, end])
            },
          },
          {
            text: '最近三天',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 2)
              picker.$emit('pick', [start, end])
            },
          },
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 6)
              picker.$emit('pick', [start, end])
            },
          },
          {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            },
          },
          {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            },
          },
        ],
      },
    }
  },
  methods: {
    changeTime(val) {
      this.$emit('getTimes', val)
    },

    /*
     * 	dealDisabledDate(time) {
     * 	// 禁止选择的时间段
     * 	var times = Date.now()
     * 	if (this.disableTime === '') {
     * 	// return time
     * 	} else if (this.disableTime === 'before') {
     * 	// 禁止选择今天之前的时间
     * 	return time.getTime() < new Date().getTime() - 86400000
     * 	} else if (this.disableTime === 'after') {
     * 	// 禁止选择今天之后的时间
     * 	return time.getTime() > times
     * 	}
     * 	}
     */
  },
}
</script>
<style lang="less" scoped>
.el-picker-panel {
	left: 20vw !important;
}
.containerv {
	margin-bottom: 10px;
}
</style>
